<template>
  <div class="citywheatherbox">
    
    <van-popup v-model="showArea"  position="bottom" :style="{ height: '50%' }" get-container="#app" >
     
      <van-overlay :show="overlayshow" class-name="overlay">
        <van-loading color="#0094ff" >切换中</van-loading>
      </van-overlay>
      <van-area 
      title="切换城市" 
      @confirm="onConfirmArea"
      @cancel="showArea = false"
      :area-list="areaList"
      :value="citycode"
       />
    </van-popup>
    <div class="head">
      
      <span class="title" @click="changeAddr()">
        <i class="positionchoise" >
          <img :src="require('@/assets/img/positionchoise.png')" />
        </i>
        <span>{{city}}</span>
      </span>

      <span class="datepick">{{datepick}}</span>
    </div>
    <div class="main">
      <template v-for="item,index in weatherlist">
        <div class="item" :key="item.date">
          <div class="temperature cold" v-if="item.temperature.substr(item.temperature.indexOf('/')+1,item.temperature.length-4)<24">{{item.temperature}}</div>
          <div class="temperature health" v-else-if="item.temperature.substr(item.temperature.indexOf('/')+1,item.temperature.length-4)<32">{{item.temperature}}</div>
          <div class="temperature warn" v-else-if="item.temperature.substr(item.temperature.indexOf('/')+1,item.temperature.length-4)<36">{{item.temperature}}</div>
          <div class="temperature danger" v-else>{{item.temperature}}</div>
          <div class="weather">{{item.weather}}</div>
          <div class="subtext" v-if="index==0">今天</div>
          <div class="subtext" v-if="index==1">明天</div>
        </div>
      </template>
      
    </div>
    <div class="bottom"></div>
  </div>
</template>

<script>
import {gettq,getcityid} from '@/api/mixin';
import {dateFormat} from '@/utils/util';
import { areaList } from '@vant/area-data';
export default {
  name:'citywather',
  data(){
    return {
      overlayshow:false,
      areaList,
      showArea:false,
      positionicon:require('@/assets/img/positionchoise.png'),
      startdate:'',
      enddate:'',
      weatherlist:[],
      cityid:''
    }
  },
  methods:{
    changeAddr(){
      this.showArea =true;
    },
     onConfirmArea(values) {
      if(this.citycode==values[2].code){
        return
      }
      this.overlayshow = true;
      let changedata={

      }
      changedata["cityfullname"] = values
        .filter((item) => !!item)
        .map((item) => item.name)
        .join("/");
      changedata["citycode"] = values[2].code;
      changedata["city"] = values[2].name;

      this.$emit('citychange',changedata);
      
      
      
    },
    getweather(fullname){
      getcityid(fullname).then(res=>{
        let data = res.data;
        this.cityid = data.id;
        return gettq(this.cityid);
      }).then(res=>{
        let data = res.data;

        let strjson =  JSON.stringify(data);
        let json = JSON.parse(strjson);
        let jsondata = json.data.result;
        this.startdate = data.startdate;
        this.enddate = data.enddate;
        this.weatherlist.splice(0,this.weatherlist.length);

        for(let i=0;i<4;i++){
          this.weatherlist.push(jsondata.future[i]);
        }


        this.overlayshow = false;
        this.showArea = false;
      })
      .catch(err=>{
        console.log(err);
        this.overlayshow = false;
        this.showArea = false;
      })
    }
  },
  watch:{
    cityfullname:{
      handler (val, olVal) {
	          if(val != olVal){
              this.getweather(val);
            }
	    },
	    deep: true
    }
    // citycode:{//深度监听，可监听到对象、数组的变化
    //      handler(val, oldVal){
    //          console.log("b.c: "+val.c, oldVal.c);
    //      },
    //      deep:true //true 深度监听
    //  }
  },
  mounted(){
    this.getweather(this.cityfullname);
  },
  computed:{
    datepick(){
      //展示未来4天的天气情况
      let now =dateFormat(new Date(),"MM月dd日");
      let end =dateFormat(new Date(new Date().getTime()+60000*60*24*3),"MM月dd日");
      return now+' ~ '+end;
    }
  },
  props:{
    city:{
      type:String,
      default:'双流区'
    },
    cityfullname:{
      type:String,
      default:'四川省/成都市/双流区'
    },
    citycode:{
      type:String,
      default:'510116'
    }
  }
}
</script>

<style lang="scss" scoped>
  .overlay{
    opacity: 1;
    width: 100%;
    height: 100%;
  }
  .citywheatherbox{
    position: relative;
    width: 90%;
    background-color: #ffffff;
    border-radius: 10px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-content: space-between;
    padding: 10px;
    margin-bottom: 10px;
   margin-top: 10px;
   


    & .head{
      flex: 0 0 42px;
      display: flex;
      vertical-align:middle;
      justify-content: space-between;
      flex-direction: row;
      line-height: 42px;
      padding: 10px 0;
      box-sizing: border-box;
      
      & .title{
        display: inline-block;
        vertical-align: middle;
        height: 42px;
        & span{
          font-size: 16px;
          font-weight: 600;
        }
        & .positionchoise{
        display: inline-block;
        vertical-align: middle;
        width: 30px;
        height: 30px;
        line-height: 42px;
        position: relative;
        & img{
          width: 100%;
          height: 100%;

        }
      }
      }
      & .datepick{
        font-size: 14px;
        vertical-align: middle;
      }
      
    }
    & .main{
      width: 100%;
      margin: 0 auto;
      height: 45px;
      display: flex;
      flex-direction: row;
      justify-content: space-around;
      align-content: space-between;
      & .item{
        flex: 0 1 auto;
        height: 100%;
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        align-content: space-between;
        & .temperature{
          font-size: 16px;
          font-weight: 400;
        }
        & .weather{
          font-size: 14px;
          color: #333;
        }

        & .subtext{
          position: absolute;
          font-size: 12px;
          background-color: rgb(101, 172, 30);
          color: #ccc;
          width: 25px;
          height: 16px;
          line-height: 16px;
          border-radius: 5px;
          right: -15px;
          top: -12px;
          z-index: 1;
        }
        & .cold{
          color: rgb(26, 130, 190);
        }
        & .health{
        color: rgb(10, 150, 29);
        }
        & .warn{
          color: rgb(207, 143, 23);
        }
        & .danger{
          color: rgb(231, 40, 26);
        }
      }

      
    }
    & .bottom{

    }
  }
</style>
